<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>用户列表</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="/static/lib/layui/css/layui.css">
    <link rel="stylesheet" href="/static/lib/fonts/iconfont.css">
	<link rel="stylesheet" href="/static/css/oksub.css">
	<link rel="stylesheet" href="/static/lib/layui/css/global.css">
	<script type="text/javascript" src="/static/lib/loading/okLoading.js"></script>
</head>
<body>
<div class="ok-body">
	<blockquote class="layui-elem-quote">系统管理>后台设置>员工管理</blockquote>
	<!--模糊搜索区域-->
	<div class="layui-row">
		<form class="layui-form ok-search-form">
			{% for i in headPermisson %}
			{% if i == 'query' %}  
			<div class="layui-form-item">
				<div class="layui-inline">
					<div class="layui-input-inline">
						<input type="text" style="width: 340px;" class="layui-input" placeholder="支持姓名/电话/邮箱查询" autocomplete="off" name="searchName" id="searchName">
					</div>
				</div>
				<button class="layui-btn layui-btn-sm layui-btn-normal" style="margin-left: 150px;margin-bottom: 10px;" lay-submit="" lay-filter="search">
					<i class="layui-icon">&#xe615;</i>查询
				</button>
			</div>
			{% endif %}
            {% endfor %}
		</form>
	</div>
	<!--数据表格-->
	<table class="layui-hide" id="tableId" lay-filter="tableFilter"></table>
</div>
<!--js逻辑-->
<script src="/static/lib/layui/layui.js"></script>
<script>
	layui.use(["element", "jquery", "table", "form", "laydate", "okLayer", "okUtils", "okMock"], function () {
		let table = layui.table;
		let form = layui.form;
		let laydate = layui.laydate;
		let okLayer = layui.okLayer;
		let okUtils = layui.okUtils;
		let okMock = layui.okMock;
		let $ = layui.jquery;

		okLoading.close($);

		let userTable = table.render({
			elem: '#tableId',
			url: "{% url 'system:getUserData' %}",
			limit: 20,
			height: 'full-125',
			page: true,
			toolbar: true,
			toolbar: "#toolbarTpl",
			size: "sm",
			cols: [[
				{type: "checkbox", fixed: "left"},
				{field: "id", title: "ID", width: 60, sort: true},
				{field: "name", title: "姓名", width: 120},
				{field: "mobile", title: "电话", width: 150},
				{field: "email", title: "邮箱", width: 180},
				{field: "role_display", title: "角色", width: 180},
				{field: "dept_id", title: "所属部门ID", width: 180, hide:true},
				{field: "dept_name", title: "所属部门", width: 180},
				{field: "roles_id", title: "roles_id", width: 120, hide:true},
				{field: "gender", title: "性别", width: 70, templet: "#sexTpl"},
				{field: "is_active", title: "状态", width: 70, templet: "#statusTpl"},
				{field: "description", title: "备注", width: 120},
				{title: "操作", width: 130, align: "center", fixed: "right", templet: "#operationTpl"}
			]],
			done: function (res, curr, count) {
				
			}
		});

		form.on("submit(search)", function (data) {
			userTable.reload({
				where: data.field,
				page: {curr: 1}
			});
			return false;
		});

		table.on("toolbar(tableFilter)", function (obj) {
			switch (obj.event) {
				case "add":
					add();
					break;
			}
		});

		table.on("tool(tableFilter)", function (obj) {
			let data = obj.data;
			switch (obj.event) {
				case "edit":
					edit(data);
					break;
				case "del":
					del(data);
					break;
			}
		});
		form.on("submit(search)", function (data) {
			userTable.reload({
                url: "{% url 'system:queryUserData' %}",
				request: {
                    pageName: 'page' //页码的参数名称，默认：page
                    ,limitName: 'limit' //每页数据量的参数名，默认：limit
                },
				page: {curr: 1},
                where:{
                    "searchName":$('#searchName').val()
                }
			});
			return false;
    	});

		function add() {
			okLayer.open("添加用户", "{% url 'system:userAddPage' %}", "90%", "90%", null, function () {
				userTable.reload();
			})
		}

		function edit(data) {
			okLayer.open("更新用户", "{% url 'system:userEditPage' %}", "90%", "90%", function (layero,index) {
				let iframe = window['layui-layer-iframe' + index];
                iframe.child(data);
			}, function () {
				userTable.reload();
			})
		}

		function del(data) {
			okLayer.confirm("确定要删除吗？请慎重！", function () {
				okUtils.ajax("/system/delUserData/"+ data.id, "get", null, true).done(function (response) {
					console.log(response);
					okUtils.tableSuccessMsg(response.msg);
				}).fail(function (error) {
					console.log(error)
				});
			})
		}
	})
</script>
<script type="text/html" id="statusTpl">
	{% verbatim %}
	{{#  if(d.is_active == 0){ }}
	<button class="layui-btn layui-btn-danger layui-btn-xs">停用</button>
	{{#  } else if(d.is_active == 1) { }}
	<button class="layui-btn  layui-btn-xs">启用</button>
	{{#  } }}
	{% endverbatim %}
</script>
<script type="text/html" id="sexTpl">
	{% verbatim %}
	{{#  if(d.gender == 0){ }}
	<button class="layui-btn layui-btn-primary layui-border-black layui-btn-xs">男</button>
	{{#  } else if(d.gender == 1) { }}
	<button class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs">女</button>
	{{#  } }}
	{% endverbatim %}
</script>
<!-- 头工具栏模板 -->
<script type="text/html" id="toolbarTpl">
	{% for i in headPermisson %}
		{% if i == 'add' %}  
		<button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="add"><i class="layui-icon">&#xe608;</i>添加用户</button>
		{% endif %}
	{% endfor %}
</script>
<!-- 行工具栏模板 -->
<script type="text/html" id="operationTpl">
	{% for i in operaPermisson %}
		{% if i == 'edit' %}  
			<a href="javascript:" title="编辑" lay-event="edit"><button class="layui-btn layui-btn-xs">编辑</button></a>
		{% elif i == 'delete' %}
    		<a href="javascript:" title="删除" lay-event="del"><button class="layui-btn layui-btn-danger layui-btn-xs">删除</button></a>
		{% endif %}
    	{% empty %}
    		<span>无权限</span>
    {% endfor %}
</script>
</body>
</html>
